<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <HelloWorld>
      <template v-slot:header>
        我是头
      </template>

      <p>内容部分</p>

      <template #[fr]>
        我是底
      </template>

      <template #myscope="slotProps">
        <h2>
          {{ slotProps.user }}
        </h2>
      </template>

    </HelloWorld> -->
    <div>
      <keep-alive>
        <component :is="currentComponent"></component>
      </keep-alive>
      <button @click="changeHandler">切换</button>
    </div>
    <div>
      {{ this.$root.gNum }}
      {{ this.$root.getNum }}
    </div>

    <CComponent ref="ccomponent"/>
    <!-- CComponent:{{ this.$refs.ccomponent.cmsg }} -->
    <DComponent>
      <h3>hahahahahaah</h3>
    </DComponent>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

import AComponent from "./components/Acomponent"
import CComponent from "./components/Ccomponent"
import DComponent from "./components/DComponent"
// import BComponent from "./components/Bcomponent"
// const BComponent = () => import("./components/Bcomponent");
const BComponent = () => ({
    component: import("./components/Bcomponent"),
    timeout: 3000
})

export default {
  name: 'App',
  data(){
    return{
      Hello:"Hello!",
      fr:"footer",
      currentComponent:AComponent,
      flag:false,
      msg:'APPMsg'
    }
  },
  components: {
    HelloWorld,
    AComponent,
    BComponent,
    CComponent,
    DComponent
  },
  methods:{
    changeHandler(){
      if(this.flag){
        this.currentComponent = AComponent
        this.flag = false;
      }else{
        this.currentComponent = BComponent
        this.flag = true;
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
